<script setup>
import { geUpdateInfoAPi } from "../../http/http";
import MyDatails from "../../components/MyDatails.vue";
import { useRoute, useRouter } from "vue-router";
import { reactive, toRefs } from "vue";
const { push } = useRouter();
const route = useRoute();
const id = route.query.id;
const name = route.query.name;
// 数据
const data = reactive({
  user_nickname: name,
});
// 点击修改名称
const upname = async () => {
  let obj = {
    user_nickname: data.user_nickname,
    id: id,
  };
  let res = await geUpdateInfoAPi(obj);
  console.log(res);
  if (res.code == 200) {
    push("/Personalnfo");
  }
};
const { user_nickname } = toRefs(data);
</script>
<template>
  <MyDatails>
    <template #left>
      <van-icon name="arrow-left" @click="$router.back" />
    </template>
    <template #text>
      <h3>修改个人信息</h3>
    </template>
    <template #right_a>
      <span class="right_a" @click="upname">保存</span>
    </template>
  </MyDatails>
  <div class="upname">
    <van-field
      v-model="user_nickname"
      label="名称"
      placeholder="请输入用户名"
    />
  </div>
</template>

<style lang="scss" scoped>
.right_a {
  font-size: 30px;
}
</style>
